<template>
  <div>
    <div class="tree-proxy-table-view">
      <div class="header-view" v-if="getHeaderValueList.length">
        <div
          class="table-item-view"
          v-for="(row,index) in getHeaderValueList"
          :key="index"
        >
          <div class="table-item-text">{{row}}</div>
        </div>
      </div>
      <el-tree
        v-if="hasData"
        :props="treeTableObj"
        :load="loadNode"
        lazy
        :expand-on-click-node="false"
      >
        <div
          class="tree-node-item-view"
          slot-scope="{ node, data }"
        >
          <div
            class="table-item-view"
            v-for="(row, index) in getHeaderKeyList"
            :key="index"
          >
            <span v-if="row === 'memberAmount'">
               <money-text :value="Number(data[row])"></money-text>
            </span>
            <span v-else>
              {{ data[row] }}
            </span>
          </div>
        </div>
      </el-tree>
      <div
        class="no-data"
        v-if="noData"
      >
        暂无数据
      </div>
    </div>
    <div class="el-pagination-container">
      <el-warning align="top">
        注意事项：<br/>
        1.下级会员佣金，红色负数为会员盈利，绿色正数为公司盈利<br/>
        2.代理上缴佣金，该层级所有代理提交给您的总金额<br/>
        3.当下级出现负佣金，代理上缴佣金为0
      </el-warning>
    </div>
  </div>
</template>

<script>

  // utils
  import { mapToArray } from '@/utils/base';
  import {commissionSubDetailTreeApi as getTreeApi} from '@/services/api/report';
  import { grid } from '@/build';

  export default {
    name: 'tree-proxy-table',
    props: {
	    info:{
	    	type:Object,
        required:true,
        default:() => {
        	return {};
        }
      }
    },

	  mixins: [grid],

    data(){
      return{
        headerMap:{
          level: '下级层数',
          username: '直属代理',
          commissionRate: '直属代理数（有效 / 总数)',
	        commRate:'提成百分比',
          memberAmount: '下级会员佣金',
          proxyAmount: '代理上缴佣金总额',
        },
        treeData:{
        	subList:[]
        },
        loading:true,
        treeTableObj:{
	        isLeaf: 'leaf',
        }
      };
    },
    computed: {
      getHeaderValueList() {
        return mapToArray(this.headerMap);
      },
      getHeaderKeyList() {
        return Object.keys(this.headerMap);
      },
      hasData() {
        return this.treeData.subList.length;
      },
      noData() {
        return !this.treeData.subList.length && !this.loading;
      },
    },
    methods: {
	    formatData(data) {
		    const { subList = []} = data || {};
		    if (!subList.length) return [];
		    return subList.map(item => ({
			    ...item,
			    memberAmount: item.mode === 1 ? '0.00' : _.currency(item.memberAmount),
			    proxyAmount: item.mode === 1 ? '0.00' : _.currency(item.proxyAmount),
			    commissionRate: `${item.effectChildSize}/${item.childSize}`,
			    commRate:`${item.commRate}%`,
			    leaf: item.childSize === 0,
			    children: null,
		    }));
	    },
	    async loadNode(node, resolve) {
		    if (node.level === 0) {
			    return resolve(
				    this.treeData.subList
			    );
		    }
		    try {
			    const [status, result] = await getTreeApi({
				    nodeId: node.data.uid,
				    settleDate:this.info.row.settle_date,
			    });
			    if (!status) throw new Error(result.message);
			    const data = this.formatData(result);
			    resolve(data);
		    } catch (e) {
			    this.$message({
				    message: `获取数据失败.${e.message || ''}`,
				    type: 'error'
			    });
		    }
	    },
    },
    mounted(){
      this.bindGet(getTreeApi,'treeData',{
      	sendingData: {
		      settleDate:this.info.row.settle_date
        },
	      format: (data) => ({
		      ...data,
		      amount: _.currency(data.amount),
		      commissionRate: `${data.effectChildSize || 0}/${data.childSize || 0}`,
		      subList: this.formatData(data),
	      }),
      });

      this.getAll();
    }
  };
</script>

<style lang="scss" scoped>
  $header-height: 45px;
  @mixin tableItemView($height: $header-height) {
    height: $height;
    display: flex;
    justify-content: space-between;
  };
  .tree-proxy-table-view {
    border: 1px solid #ebeef5;
    border-radius: 8px;
    overflow: hidden;
    .header-view {
      @include tableItemView();
      background-color: #fbfbfb;
    }
    .tree-node-item-view{
      /*border-bottom: 1px solid #ebeef5;*/
      /*&:last-child{*/
        /*border: none;*/
      /*}*/
    }
    /deep/ .el-tree-node{
      border-bottom: 1px solid #ebeef5;
      &:last-child{
        border: none;
      }
    }
    .table-item-view {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1px solid #ebeef5;
      width: 16.66%;
      &:last-child{
        border: none;
      }
    }
    .table-item-text {
      color: #000;
      font-weight: 700;
    }

    .tree-node-item-view {
      @include tableItemView();
      margin-left: -26px;
      width: 100%;

      .table-item-text {
        color: #000000;
      }

      .table-item-succ-text {
        color: #33FF66;
      }
      .table-item-fail-text {
        color: red;
      }
    }
    :global(.el-tree-node__content){
      height: $header-height;
      padding-left: 0 !important;
    }
    .no-data {
      padding-top: 15px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666666;
    }
  }

</style>
